<template>
	<view>
	<view class="device"><!--设备类型类别-->
			<view class="li" v-for="item in list">
				<view class="info"  @click="typeClick(item)">
					<image :src="'../../static/images/dicon'+item.icon+'.png'" style="height: 60rpx;" mode="heightFix"></image>
					<view>{{item.name}}</view>
					<view class="content">{{item.content}}</view>
				</view>
			</view>
			
			
	</view>
	<view class="detail">-请选择适合您家人的设备绑定-</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			list:[],
			infoId:"",
			}
			
			// 目前是两种，1是腕表，2，是睡毯。
		},
		onLoad(e){
			this.infoId = e.infoId;
			this.list = this.$tools.deviceTypeList();
		},
		methods: {
			typeClick(item){
				uni.redirectTo({
					url:`/pages/addDevice/addDevice?typeId=${item.id}&infoId=${this.infoId}`
				})
			}
		}
	}
</script>

<style scoped>
	.device{
		padding:30rpx 30rpx 0 0;
		display: flex;
	}
	.device .li{
		width:50%;padding-left:30rpx;
		
	}
	.device .info{
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding:30rpx;
		border-radius: 0rpx;
	}
	.device .info image{
		margin:10rpx 0 20rpx 0;
	}
	.device .info .content{
		color: #8f8f8f;
		padding-top: 10rpx;
		font-size:24rpx;
	}
	.detail{
		padding:100rpx 0 100rpx 0;
		color: #8f8f8f;
		text-align: center;
	}
	
</style>
